<template>
	<el-dialog title="输入框组件" :visible.sync="pickInput.status" width="760px" :before-close="handleCancel" class="enter-input">
		<el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
		  <el-tab-pane :name="item.name" v-for="(item,key) in tab_pane" :key="key">
			  <span slot="label" :style="{borderColor:item.color}">输入框</span>
		  </el-tab-pane>
		</el-tabs>
		<el-form :model="pickInputInfo" label-width="90px">
			<el-form-item label="输入框名称">
				<el-input v-model="pickInputInfo.value" :placeholder="pickInputInfo.text" :clearable='true'></el-input>
				<el-checkbox-group v-model="pickInputInfo.type" style="display:inline-block">
		      <el-checkbox label="必填" name="type"></el-checkbox>
		    </el-checkbox-group>
			</el-form-item>
			<el-form-item>
				<el-radio-group v-model="pickInputInfo.text">
					<el-radio label="姓名"></el-radio>
					<el-radio label="手机"></el-radio>
					<el-radio label="邮箱"></el-radio>
					<el-radio label="文本"></el-radio>
				</el-radio-group>
			</el-form-item>
		</el-form>
		<span slot="footer" class="dialog-footer">
			<el-button  size="mini" @click="handleCancel">取 消</el-button>
			<el-button  size="mini" type="primary" @click="handleConfirm">确 定</el-button>
		</span>
	</el-dialog>
</template>

<script>

	export default {
		name: 'PickInput',
		data() {
			return {
				activeName:"red",
				pickInputInfo: {
					text: '请命名',
					tab: 0,
					color: '#ff6b63'
				},
				tab_pane:[
					{
						name:'red',
						color:'#ff6b63'
					},
					{
						name:'grey',
						color:'#ccd0d9'
					},
					{
						name:'orange',
						color:'#ffbd4f'
					},
					{
						name:'green',
						color:'#49ccb0'
					},
					{
						name:'black',
						color:'#8898b7'
					},

					{
						name:'blue',
						color:'#5c7aff'
					}
				]
			}
		},
		computed: {
			pickInput() {
				return this.$store.getters.pickInput
			}
		},
		methods: {
			handleCancel() {
				this.$store.commit('SET_PICK_INPUT', false)
			},
			handleConfirm() {
				this.pickInput && this.pickInput.callback && this.pickInput.callback(this.pickInputInfo)
				this.handleCancel()
			},
			handleClick() {
				for( let item of this.tab_pane){
					if(item.name==this.activeName){
						this.pickInputInfo.color=item.color
						break
					}
				}
		 	}
		}
	}
</script>

<style lang="scss" >
	.enter-input .el-input{
		width:360px;
		margin-right:10px;
	}

	.enter-input .el-tabs--border-card{
		box-shadow: none;
		margin:0 0 20px;
	}


.enter-input{
		.el-dialog__body {
			padding:0!important;
			.el-form{
				padding-left:100px;
			}
		}
		.el-tabs__item{
			height:auto;
			padding:0;
			border:none!important;
			margin-top:10px!important;
			width:auto!important;
			margin:0!important;
		}
		.el-tabs__item  span{
			display:block;
			width:100px;
			height:30px;
			text-align: center!important;
			line-height: 30px;
			color:#606266;
			margin: 10px 10px 15px 10px!important;
			border:1px solid;
			background: #fff;
		}
		.el-tabs__item:nth-child(2),.el-tabs--top.el-tabs--border-card .el-tabs__item:last-child
		{
			padding:0!important;
		}
		.el-tabs--border-card{
			border:none;
		}
		.el-tabs--border-card>.el-tabs__header{
			background:#eff1f6;
			border:none;
			height:65px;
			padding:0 20px;
		}
		.el-tabs--border-card>.el-tabs__content {
			padding:0;

		}
		.el-tabs__nav-scroll{
			margin-top:10px;
		}
	}
</style>
